<script setup>
  import tarbar from '@/layout/tarbar/tarbar.vue'
  import navbar from '@/layout/header/navbar.vue'
  import { ref, onMounted } from 'vue';
  import { useClusterStore } from '@/stores/cluster';

  const clusterStore = useClusterStore();
  const statistics = ref({
    totalClusters: 0,
    runningJobs: 0,
    totalProjects: 0,
    activeInstances: 0
  });

  // 获取统计数据
  const fetchStatistics = async () => {
    // TODO: 调用后端API获取实际数据
    statistics.value = {
      totalClusters: 5,
      runningJobs: 12,
      totalProjects: 8,
      activeInstances: 25
    };
  };

  onMounted(() => {
    fetchStatistics();
  });
</script>

<template>
  <navbar/>
  <div class="home-container">
    <!-- 统计卡片区域 -->
    <div class="stats-grid">
      <div class="stat-card">
        <van-icon name="cluster-o" class="stat-icon" />
        <div class="stat-content">
          <div class="stat-value">{{ statistics.totalClusters }}</div>
          <div class="stat-label">集群总数</div>
        </div>
      </div>
      
      <div class="stat-card">
        <van-icon name="play-circle-o" class="stat-icon" />
        <div class="stat-content">
          <div class="stat-value">{{ statistics.runningJobs }}</div>
          <div class="stat-label">运行中作业</div>
        </div>
      </div>

      <div class="stat-card">
        <van-icon name="apps-o" class="stat-icon" />
        <div class="stat-content">
          <div class="stat-value">{{ statistics.totalProjects }}</div>
          <div class="stat-label">项目总数</div>
        </div>
      </div>

      <div class="stat-card">
        <van-icon name="clock-o" class="stat-icon" />
        <div class="stat-content">
          <div class="stat-value">{{ statistics.activeInstances }}</div>
          <div class="stat-label">活跃实例</div>
        </div>
      </div>
    </div>

    <!-- 快速操作区域 -->
    <div class="quick-actions">
      <h3 class="section-title">快速操作</h3>
      <van-grid :column-num="2" :gutter="16">
        <van-grid-item icon="add-o" text="新建集群" to="/cluster" />
        <van-grid-item icon="play-circle-o" text="运维管理" to="/ops" />
      </van-grid>
    </div>

    <!-- 最近活动列表 -->
    <div class="recent-activities">
      <h3 class="section-title">最近活动</h3>
      <van-cell-group inset>
        <van-cell title="Flink作业启动成功" label="10分钟前" icon="success" />
        <van-cell title="新增Dolphin集群" label="30分钟前" icon="plus" />
        <van-cell title="工作流实例完成" label="1小时前" icon="checked" />
      </van-cell-group>
    </div>
  </div>
  <tarbar/>
</template>

<style scoped>
.home-container {
  padding: 16px;
  background: var(--background-color);
  min-height: calc(100vh - 100px);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.stat-icon {
  font-size: 24px;
  color: var(--primary-color);
  margin-right: 12px;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-color);
  line-height: 1.2;
}

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
  margin: 24px 0 16px;
}

.quick-actions {
  margin-bottom: 24px;
}

.recent-activities {
  margin-bottom: 24px;
}

:deep(.van-grid-item__content) {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
}

:deep(.van-grid-item__icon) {
  font-size: 24px;
  color: var(--primary-color);
}

:deep(.van-cell-group--inset) {
  margin: 0;
}
</style>
